<template>
    <div id="components-slider-demo-mark">
      <h4>included=true</h4>
      <a-slider :marks="marks" :default-value="37" />
      <a-slider range :marks="marks" :default-value="[26, 37]" />
  
      <h4>included=false</h4>
      <a-slider :marks="marks" :included="false" :default-value="37" />
  
      <h4>marks & step</h4>
      <a-slider :marks="marks" :step="10" :default-value="37" />
  
      <h4>step=null</h4>
      <a-slider :marks="marks" :step="null" :default-value="37" />
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
        marks: {
          0: '0°C',
          26: '26°C',
          37: '37°C',
          100: {
            style: {
              color: '#f50',
            },
            label: <strong>100°C</strong>,
          },
        },
      };
    },
    methods: {
      onChange(value) {
        console.log('change: ', value);
      },
      onAfterChange(value) {
        console.log('afterChange: ', value);
      },
    },
  };
  </script>
  <style scoped>
  #components-slider-demo-mark h4 {
    margin: 0 0 16px;
  }
  #components-slider-demo-mark .ant-slider-with-marks {
    margin-bottom: 44px;
  }
  </style>
  